<template>
  <div class="home-nav-bar" @click="toSearch">
    <div class="home-nav-bar-wrapper">
      <div class="left">唐山<van-icon class-prefix="my-icon" name="down" /></div>
      <div class="center van-ellipsis">你想住在哪里？</div>
      <div class="right"><van-icon class-prefix="my-icon" name="location" />地图</div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    toSearch() {
      this.$router.push({ name: 'SearchHouse' })
    }
  }
}
</script>

<style scoped lang="less">
.home-nav-bar {
  height: @nav-bar-height;
  padding: 4px 18px;
  &.active {
    background: @white;
    .home-nav-bar-wrapper {
      background: @background-color;
    }
  }
  .home-nav-bar-wrapper {
    width: 100%;
    height: 100%;
    padding: 12px;
    font-size: @font-size-13;
    line-height: @line-height-1;
    background: @white;
    border-radius: @border-radius-md;
    display: flex;
    align-items: center;
    .left {
      padding-right: @padding-15;
    }
    .center {
      color: @gray-6;
      flex: 1;
      overflow: hidden;
      padding: 0 @padding-15;
    }
    .right {
      padding-left: @padding-15;
      text-align: right;
      color: @blue;
      .my-icon-location {
        margin-right: 2px;
      }
    }
  }
}
</style>
